<template>
  <div class="space-y-2">
    <div v-if="uniqueDecorations.length === 0" class="text-center text-gray-500 py-4">
      No decorations added yet
    </div>

    <div v-else class="max-h-[300px] overflow-y-auto pr-2 space-y-2 scrollbar-thin -mr-2">
      <div
          v-for="decoration in uniqueDecorations"
          :key="decoration.id"
          class="flex items-center justify-between p-2 rounded-lg border bg-white"
          :class="{
          'bg-indigo-50 border-indigo-200 shadow-sm': selectedId === decoration.id,
          'hover:bg-gray-200 hover:border-gray-200': selectedId !== decoration.id
        }"
      >
        <div
            @click="$emit('select', decoration.id)"
            class="flex items-center space-x-3 flex-1 cursor-pointer"
        >
          <type-icon v-if="decoration.type === 'text'" class="w-4 h-4 text-gray-500" />
          <image-icon v-else class="w-4 h-4 text-gray-500" />
          <span class="text-sm text-gray-700 truncate">
            {{ decoration.preview }}
          </span>
        </div>
        <div class="flex items-center space-x-2">
          <el-button
              size="mini"
              type="text"
              @click="$emit('select', decoration.id)"
              class="p-1 text-gray-400 hover:text-indigo-600 rounded transition-colors"
              title="Edit in 3D"
          >
            <edit-icon class="w-4 h-4" />
          </el-button>
          <el-button
              size="mini"
              type="text"
              @click="$emit('delete', decoration.id)"
              class="p-1 text-gray-400 hover:text-red-600 rounded transition-colors"
              title="Delete"
          >
            <trash-icon class="w-4 h-4" />
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Type, Image, Edit, Trash2 } from 'lucide-vue';

export default {
  components: {
    'type-icon': Type,
    'image-icon': Image,
    'edit-icon': Edit,
    'trash-icon': Trash2,
  },
  props: {
    decorations: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item =>
            item.id &&
            ['text', 'image'].includes(item.type) &&
            item.preview
        );
      }
    },
    selectedId: {
      type: String,
      default: null
    }
  },
  computed: {
    uniqueDecorations() {
      // Remove duplicates by creating a Map and converting back to array
      const uniqueMap = new Map();
      this.decorations.forEach(decoration => {
        uniqueMap.set(decoration.id, decoration);
      });
      return Array.from(uniqueMap.values());
    }
  }
};
</script>

<style scoped>
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f1f1f1;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
</style>